<template>
    <div>
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 0;" v-permission="'/sysDictType/getList'">

            <el-input clearable @keyup.enter.native="handleFind" class="filter-item" style="width: 200px;margin-left: 10px;"
                v-model="query.dictType" placeholder="请输入字典类型"></el-input>

            <el-input clearable @keyup.enter.native="handleFind" class="filter-item" style="width: 200px;margin-left: 10px;"
                v-model="query.dictName" placeholder="请输入字典名称"></el-input>

            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFind"
                v-permission="'/sysDictType/getList'" style="margin-left: 10px;">查找</el-button>
            <el-button class="filter-item" type="primary" @click="handleAdd" icon="el-icon-edit"
                v-permission="'/sysDictType/add'">添加</el-button>
            <el-button class="filter-item" type="danger" @click="handleDeleteBatch" icon="el-icon-delete"
                v-permission="'/sysDictType/delete'">删除选中</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" @sort-change="changeSort"
            :default-sort="{ prop: 'sort', order: 'descending' }">

            <el-table-column type="selection"></el-table-column>

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column label="字典类型" width="200" align="center">
                <template slot-scope="scope">
                    <el-tag type="warning" style="cursor: pointer">{{ scope.row.dictType }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="字典名称" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.dictName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="备注" width="200" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.remark }}</span>
                </template>
            </el-table-column>

            <el-table-column label="发布状态" width="100" align="center" prop="isPublish" sortable="custom"
                :sort-by="['isPublish']">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.isPublish == '1'">上架</el-tag>
                    <el-tag type="danger" v-else>下架</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="排序" width="80" align="center" prop="sort" sortable="custom"
                :sort-orders="['ascending', 'descending']">
                <template slot-scope="scope">
                    <span>{{ scope.row.sort }}</span>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center" prop="createTime" sortable="custom"
                :sort-by="['createTime']">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="100" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <span>正常</span>
                    </template>
                    <template v-if="scope.row.status == 2">
                        <span>推荐</span>
                    </template>
                    <template v-if="scope.row.status == 0">
                        <span>已删除</span>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="240">
                <template slot-scope="scope">
                    <el-button @click="handleList(scope.row)" type="success" size="small">列表</el-button>
                    <el-button @click="handleEdit(scope.row)" type="primary" size="small"
                        v-permission="'/sysDictType/edit'">编辑</el-button>
                    <el-button @click="handleDelete(scope.row)" type="danger" size="small"
                        v-permission="'/sysDictType/delete'">删除</el-button>
                </template>
            </el-table-column>


        </el-table>
    </div>
</template>

<script>
import { getSysDictTypeList, addSysDictType, editSysDictType, deleteBatchSysDictType } from "@/api/sysDictType"

export default {
    name: '',
    data() {
        return {
            query: {}, // 查询对象
            multipleSelection: [], //多选，用于批量删除
            tableData: [],
            keyword: "",
            currentPage: 1,
            pageSize: 10,
            total: 0, //总数量
            title: "增加字典类型",
            dialogFormVisible: false, //控制弹出框
            formLabelWidth: "120px",
            isEditForm: false,
            form: {},
            orderByDescColumn: "", // 降序字段
            orderByAscColumn: "", // 升序字段
            rules: {
                dictType: [
                    { required: true, message: '字典类型不能为空', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在1到20个字符' },
                ],
                dictName: [
                    { required: true, message: '字典名称不能为空', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在1到20个字符' },
                ],
                isPublish: [
                    { required: true, message: '发布状态不能为空', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '排序字段不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '排序字段只能为自然数' },
                ]
            }
        };
    },
    created() {
        this.sysDictTypeList();
    },
    methods: {
        sysDictTypeList() {
            let params = {}
            params.dictName = this.query.dictName;
            params.dictType = this.query.dictType;
            params.currentPage = this.currentPage;
            params.pageSize = this.pageSize;
            params.orderByDescColumn = this.orderByDescColumn
            params.orderByAscColumn = this.orderByAscColumn
            getSysDictTypeList(params).then(response => {
                this.tableData = response.data.records;
                this.currentPage = response.data.current;
                this.pageSize = response.data.size;
                this.total = response.data.total;
            })
        },
        // 这里可以设置一些初始值
        getFormObject: function () {
            let formObject = {
                isPublish: '1',
                sort: 0
            };
            return formObject;
        },
        handleFind() {

        },
        handleAdd() {

        },
        handleDeleteBatch() {

        },
        handleSelectionChange() {

        },
        changeSort() {

        },
        handleList(row) {
            // 跳转路由至字典数据
            let typeUid = row.uid
            this.$router.push({
                path: 'sysDictData',
                query: { dictTypeUid: typeUid }
            })
        },
        handleEdit(row) {

        },
        handleDelete(row) {

        }
    }
}
</script>

<style scoped></style>